<template>
  <div class="home">
      <div>
          <p>a:{{a}}</p>
          <p>b:{{b}}</p>
      </div>
      <div>
          <p>doubleA:{{doubleA}}</p>
          <p>doubleB:{{doubleB}}</p>
          <p>both:{{both}}</p>
          <p>doubleBoth:{{doubleBoth}}</p>
      </div>
      <br>
      <div>
          <h3>修改数据的方法_同步</h3>
          <p>
              <button @click="addA()">addA</button>
              <button @click="addAn(10)">addAn</button>
              <button @click="addBoth({m:1,n:2})">addBoth</button>
              <!-- commit/dispatch 传入一个对象参数 type:触发的方法名  -->
              <!-- <button @click="$store.commit({type:'addBoth',m:1,n:2})">addBoth</button> -->
              <button @click="addBoth({type:'addBoth',m:1,n:2})">addBoth</button>
          </p>
      </div>
      <br>
      <div>
          <h3>修改数据的方法_异步</h3>
          <p>
              <button @click="addA_Async()">addA</button>
              <button @click="addAn_Async(10)">addAn</button>
          </p>
      </div>
  </div>
</template>

<script>
// 如何使用$store
// 1. 通过$store实例手动取值和调用方法  => 麻烦
// $store.state.xxx
// $store.getters.xxx
// $store.commit('xxx')
// $store.dispatch('xxx')

// 2. 根据$store实例中的数据和方法 => 在当前实例中生成新的计算属性和方法



export default {
  name: 'HomeView',
  computed:{
    // store属性处理(state getters)
    // 当前实例 生成计算属性 -> 依赖于$store.state.a
    a:function(){
        return this.$store.state.a;
    },
    b:function(){
        return this.$store.state.b;
    },
    doubleA:function(){
        return this.$store.getters.doubleA;
    },
    doubleB:function(){
        return this.$store.getters.doubleB;
    },
    both:function(){
        return this.$store.getters.both;
    },
    doubleBoth:function(){
        return this.$store.getters.doubleBoth;
    },
  },
  methods:{
    // 在当前vue实例中绑定同名方法  => 通过此方法调用$store中的mutations actions中的方法 
    addA:function(){
        return this.$store.commit("addA");
    },
    addAn:function(n){
        return this.$store.commit("addAn",n);
    },
    addBoth:function(obj){ // 参数是对象
        if(obj["type"]){ //  
            return this.$store.commit(obj);
        }else{
            return this.$store.commit("addBoth",obj);
        }
    },
    addA_Async:function(){
        return this.$store.dispatch('addA_Async');
    },
    addAn_Async:function(n){
        return this.$store.dispatch('addAn_Async',n);
    }
  },
  mounted(){
    console.log("当前实例",this);
    console.log("当前store实例",this.$store);
  }
}
</script>
